<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 106实验室</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* 头部样式 */
        header {
            background-color: #1a1a2e;
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo img {
            height: 40px;
            margin-right: 10px;
        }
        
        .logo h1 {
            font-size: 24px;
            font-weight: 700;
        }
        
        .logo span {
            color: #4cc9f0;
        }
        
        /* 注册表单区域 */
        .auth-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: calc(100vh - 200px);
            padding: 50px 0;
        }
        
        .auth-box {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 450px;
            padding: 40px;
        }
        
        .auth-title {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .auth-title h2 {
            font-size: 28px;
            color: #1a1a2e;
            margin-bottom: 10px;
        }
        
        .auth-title p {
            color: #666;
        }
        
        .auth-form .form-group {
            margin-bottom: 20px;
        }
        
        .auth-form label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #444;
        }
        
        .auth-form input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        .auth-form input:focus {
            border-color: #4cc9f0;
            outline: none;
        }
        
        .password-strength {
            margin-top: 5px;
            height: 4px;
            background-color: #eee;
            border-radius: 2px;
            overflow: hidden;
        }
        
        .strength-bar {
            height: 100%;
            width: 0;
            background-color: #e74c3c;
            transition: width 0.3s, background-color 0.3s;
        }
        
        .terms {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }
        
        .terms input {
            width: auto;
            margin-right: 8px;
            margin-top: 3px;
        }
        
        .terms label {
            font-size: 14px;
            color: #666;
        }
        
        .terms a {
            color: #4cc9f0;
            text-decoration: none;
        }
        
        .auth-button {
            width: 100%;
            padding: 12px;
            background-color: #1a1a2e;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .auth-button:hover {
            background-color: #4cc9f0;
        }
        
        .auth-switch {
            text-align: center;
            margin-top: 20px;
            color: #666;
        }
        
        .auth-switch a {
            color: #4cc9f0;
            text-decoration: none;
            font-weight: 500;
        }
        
        /* 页脚 */
        footer {
            background-color: #1a1a2e;
            color: white;
            padding: 20px 0;
            text-align: center;
        }
        
        .footer-bottom p {
            font-size: 14px;
            color: #aaa;
        }
    </style>
    <script>
        // 密码强度检测
        function checkPasswordStrength(password) {
            const strengthBar = document.getElementById('strength-bar');
            let strength = 0;
            
            if (password.length === 0) {
                strengthBar.style.width = '0';
                strengthBar.style.backgroundColor = '#e74c3c';
                return;
            }
            
            // 长度评分
            if (password.length > 7) strength += 1;
            if (password.length > 10) strength += 1;
            
            // 包含数字
            if (password.match(/\d/)) strength += 1;
            
            // 包含小写字母
            if (password.match(/[a-z]/)) strength += 1;
            
            // 包含大写字母
            if (password.match(/[A-Z]/)) strength += 1;
            
            // 包含特殊字符
            if (password.match(/[^a-zA-Z0-9]/)) strength += 1;
            
            // 更新强度条
            let width = 0;
            let color = '#e74c3c'; // 红色
            
            if (strength <= 2) {
                width = 33;
                color = '#e74c3c'; // 红色
            } else if (strength <= 4) {
                width = 66;
                color = '#f39c12'; // 橙色
            } else {
                width = 100;
                color = '#2ecc71'; // 绿色
            }
            
            strengthBar.style.width = width + '%';
            strengthBar.style.backgroundColor = color;
        }
    </script>
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <div class="container header-content">
            <div class="logo">
                <img src="https://via.placeholder.com/40x40" alt="106实验室logo">
                <h1>106<span>实验室</span></h1>
            </div>
        </div>
    </header>

    <!-- 注册表单 -->
    <div class="auth-container">
        <div class="auth-box">
            <div class="auth-title">
                <h2>创建新账户</h2>
                <p>加入106实验室，享受会员专属优惠</p>
            </div>
            
            <form class="auth-form">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" placeholder="请输入您的用户名" required>
                </div>
                
                <div class="form-group">
                    <label for="email">电子邮箱</label>
                    <input type="email" id="email" placeholder="请输入您的电子邮箱" required>
                </div>
                
                <div class="form-group">
                    <label for="phone">手机号码</label>
                    <input type="tel" id="phone" placeholder="请输入您的手机号码" required>
                </div>
                
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" placeholder="请输入至少8位密码" 
                           required minlength="8" oninput="checkPasswordStrength(this.value)">
                    <div class="password-strength">
                        <div id="strength-bar" class="strength-bar"></div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="confirm-password">确认密码</label>
                    <input type="password" id="confirm-password" placeholder="请再次输入密码" required>
                </div>
                
                <div class="terms">
                    <input type="checkbox" id="agree-terms" required>
                    <label for="agree-terms">我已阅读并同意<a href="#">服务条款</a>和<a href="#">隐私政策</a></label>
                </div>
                
                <button type="submit" class="auth-button">注册</button>
                
                <div class="auth-switch">
                    已有账户? <a href="login.html">立即登录</a>
                </div>
            </form>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-bottom">
                <p>&copy; 2023 106实验室 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>
</body>
</html>